<template>
    <el-card>
        <div v-if="!hideHead" class="border-bottom pb-10px flex justify-between">
            <div class="text-16px font-bold">筛选</div>
            <div class="flex gap-16px">
                <div>
                    <slot name="header"></slot>
                </div>
                <div v-for="(i, index) in filters.utilButtonList" :key="index" class="flex cursor-pointer items-center">
                    <div class="fc-lightgrey unselect mg-l-5 text-14px">{{ i.name }}</div>
                </div>
                <div v-if="showClear && showicon" class="flex cursor-pointer items-center" @click="onunfold">
                    <img src="../../assets/image/unfold-icon.png" class="w-16 mytransition"
                         :class="{ 'spin180': isunfold }" alt=""/>
                    <div class="fc-lightgrey unselect ml-5px text-14px">{{ isunfold ? '收起' : '展开' }}</div>
                </div>
            </div>
        </div>
        <div class="flex justify-between gap-16px" :class="{ 'mt-20px': !hideHead }">
            <div class="left-item flex gap-16px text-14px flex-1">
                <div class="w-full mytransition" ref="mains" :class="[!isunfold ? 'fix-h' : 'my-h-auto']">
                    <div class="grid mb-5px" :style="{
                        'grid-template-columns': `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
                    }">
                        <div v-for="(i, index) in gridData" :key="index" class="flex items-center gap-16px"
                             :class="{ 'full': i.isFull }">
                            <div class="label">{{ i.name }}:</div>
                            <div class="flex-1">
                                <el-input v-if="i.type === 'input'" v-model="i.value" clearable
                                          :placeholder="i.placeholder || '请输入'" :disabled="i.disabled || false"
                                          @input="handleInput(i)"/>
                                <el-select v-if="i.type === 'select'" v-model="i.value" class="w-full"
                                           :disabled="i.disabled || false" clearable
                                           :placeholder="i.placeholder || '请选择'"
                                           @focus="i.handleFocus && i.handleFocus(i)"
                                           @change="doSelectChange(i)">
                                    <el-option v-for="item in i.options" :key="item[i?.defaultAttrs?.value || 'value']"
                                               :label="item[i?.defaultAttrs?.label || 'label']"
                                               :value="item[i?.defaultAttrs?.value || 'value']"/>
                                </el-select>
                                <template v-if="i.type === 'inputSelect'">
                                    <el-select v-model="i.value" filterable remote class="w-full" clearable
                                               :multiple="i.multiple" :disabled="i.disabled || false"
                                               :placeholder="i.placeholder"
                                               @change="doSelectChange(i)"
                                               @focus="i.handleFocus && i.handleFocus(i)"
                                               :remote-method="(val) => i.remoteMethod(val, i)">
                                        <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                                   :label="item[i.defaultAttrs.label]"
                                                   :value="item[i.defaultAttrs.value]"/>
                                    </el-select>
                                </template>
                                <el-date-picker v-if="i.type === 'date'" :disabled="i.disabled || false"
                                                class="w-full w-date-full"
                                                :class="{ 'set-fs': i.dateType === 'daterange' }"
                                                :clearable="!i.noClear"
                                                v-model="i.value" :type="i.dateType || 'date'"
                                                :value-format="i.valueFormat || 'YYYY-MM-DD'"
                                                :placeholder="i.placeholder || '请选择日期'" range-separator="-"
                                                :start-placeholder="i.startPlaceholder || '请选择日期'"
                                                :end-placeholder="i.endPlaceholder || '请选择日期'" @change="doSelectChange(i)"/>
                                <div v-if="i.type === 'radiogroup'" :style="{ 'min-width': `${i.width}px` }">
                                    <el-radio-group v-model="i.value" :disabled="i.disabled || false"
                                                    @change="doSelectChange(i)">
                                        <el-radio v-for="item in i.options"
                                                  :key="item[i?.defaultAttrs?.value || 'value']"
                                                  :label="item[i?.defaultAttrs?.value || 'value']">{{
                                                item[i?.defaultAttrs?.label || "label"]
                                            }}
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                                <el-checkbox-group v-if="i.type === 'checkgroup'" v-model="i.value"
                                                   @change="handleCheckboxChange(i)">
                                    <el-checkbox v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                                 :label="item[i.defaultAttrs.value]">{{
                                            item[i.defaultAttrs.label]
                                        }}
                                    </el-checkbox>
                                </el-checkbox-group>
                                <el-cascader v-if="i.type === 'cascader'" class="w-full" v-model="i.value"
                                             :options="i.options" :props="i.props" @change="doSelectChange(i)"
                                             @focus="i.handleFocus(i)" clearable/>
                                <selectDept v-if="i.type === 'selectDept'" v-model:value="i.value"
                                            @change="doSelectChange(i)"/>
                                <selectDeptMember ref="selectDeptMemberRef" v-if="i.type === 'selectDeptMember'"
                                                  :dept-id="i.deptId" v-model:value="i.value"
                                                  @change="doSelectChange(i)"/>
                            </div>
                        </div>
                    </div>
                    <div v-for="(i, index) in noGridData" :key="index" class="flex items-center gap-16px set-lh"
                         :class="{ 'full': i.isFull }">
                        <div class="label">{{ i.name }}:</div>
                        <div class="flex-1">
                            <el-input v-if="i.type === 'input'" :disabled="i.disabled || false" v-model="i.value"
                                      clearable
                                      :placeholder="i.placeholder || '请输入'" @input="handleInput(i)"/>
                            <el-select v-if="i.type === 'select'" :disabled="i.disabled || false" v-model="i.value"
                                       class="w-full" clearable
                                       :placeholder="i.placeholder || '请选择'"
                                       @focus="i.handleFocus && i.handleFocus(i)"
                                       @change="doSelectChange(i)">
                                <el-option v-for="item in i.options" :key="item[i?.defaultAttrs?.value || 'value']"
                                           :label="item[i?.defaultAttrs?.label || 'label']"
                                           :value="item[i?.defaultAttrs?.value || 'value']"/>
                            </el-select>
                            <template v-if="i.type === 'inputSelect'">
                                <el-select v-model="i.value" filterable :disabled="i.disabled || false" remote
                                           class="w-full" clearable
                                           :multiple="i.multiple" :placeholder="i.placeholder"
                                           @change="doSelectChange(i)"
                                           @focus="i.handleFocus && i.handleFocus(i)"
                                           :remote-method="(val) => i.remoteMethod(val, i)">
                                    <el-option v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                               :label="item[i.defaultAttrs.label]" :value="item[i.defaultAttrs.value]"/>
                                </el-select>
                            </template>
                            <el-date-picker v-if="i.type === 'date'" :disabled="i.disabled || false"
                                            class="w-full w-date-full" :clearable="!i.noClear"
                                            v-model="i.value" :type="i.dateType || 'date'"
                                            :value-format="i.valueFormat || 'YYYY-MM-DD'"
                                            :placeholder="i.placeholder || '请选择日期'"
                                            range-separator="-" start-placeholder="请选择" end-placeholder="请选择"
                                            @change="doSelectChange(i)"/>
                            <div v-if="i.type === 'radiogroup'" :style="{ 'min-width': `${i.width}px` }">
                                <el-radio-group v-model="i.value" :disabled="i.disabled || false"
                                                @change="doSelectChange(i)">
                                    <el-radio v-for="item in i.options" :key="item[i?.defaultAttrs?.value || 'value']"
                                              :label="item[i?.defaultAttrs?.value || 'value']">{{
                                            item[i?.defaultAttrs?.label
                                            || "label"]
                                        }}
                                    </el-radio>
                                </el-radio-group>
                            </div>
                            <el-checkbox-group v-if="i.type === 'checkgroup'" :disabled="i.disabled || false"
                                               v-model="i.value"
                                               @change="handleCheckboxChange(i)">
                                <el-checkbox v-for="item in i.options" :key="item[i.defaultAttrs.value]"
                                             :label="item[i.defaultAttrs.value]">{{
                                        item[i.defaultAttrs.label]
                                    }}
                                </el-checkbox>
                            </el-checkbox-group>
                            <el-cascader v-if="i.type === 'cascader'" class="w-full" v-model="i.value"
                                         :options="i.options" :props="i.props" @change="doSelectChange(i)"
                                         @focus="i.handleFocus(i)" clearable/>
                            <selectDept v-if="i.type === 'selectDept'" v-model:value="i.value"
                                        @change="doSelectChange(i)"/>
                            <selectDeptMember ref="selectDeptMemberRef" v-if="i.type === 'selectDeptMember'"
                                              :dept-id="i.deptId" v-model:value="i.value" @change="doSelectChange(i)"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-item">
                <slot name="right">
                    <div>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button type="" @click="handleClear">重置</el-button>
                    </div>
                </slot>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import {ref, watch, onMounted} from 'vue'
import {cloneDeep} from 'lodash'
import selectDept from './selectDept.vue'
import selectDeptMember from './selectDeptMember.vue'

/**
 * filterData: {
 *
 *  list: [   筛选项列表
 *      name: 名称,
 prop: 后端需要的字段名,
 value: 值,
 placeholder: 默认提示,
 noEmit: 布尔值  如果不需要改动后立即调接口 可设置为true
 type: 类型 input,select,等  根据这个类型判断使用哪个element组件
 inputType: 类型为input时有， 对应input的type
 options: 类型为select时有,  select的options选项
 defaultAttrs: {   类型为select时有   option对应的label 和value
 label: '',
 value: ''
 },
 handleFocus: (item) => {} 获焦事件
 handleChange: (item) => {}  change事件
 handleInput: (item) => {} input事件
 *  ]，
 utilButtonList: [   //右侧按钮组
 {
 icon: 图标,
 name: 按钮名称,
 click: () => {}  点击事件
 }
 ]
 * }
 *
 */
const showicon = ref(true)
const mains = ref()
const props = defineProps({
    filterData: {
        type: Object,
    },
    showClear: {
        type: Boolean,
        default: true,
    },
    hideHead: {
        type: Boolean,
        default: false,
    },
    minWidth: {
        type: Number,
        default: 250,
    },
    noEmit: {
        type: Boolean,
        default: false,
    },
})

const emits = defineEmits(['update:filterData', 'doSearch'])
const isunfold = ref(true)
const filters = ref({})

const selectDeptMemberRef = ref(null)

const gridData = ref({})
const noGridData = ref({})
const onunfold = () => {
    isunfold.value = !isunfold.value
}
const handleClear = () => {
    for (const key in filters.value) {
        if (key === 'searchValue') {
            filters.value[key].value = ''
        }
        if (key === 'list') {
            if (Array.isArray(filters.value[key])) {
                filters.value[key].forEach((i) => {
                    if (Object.prototype.hasOwnProperty.call(i, 'initValue')) {
                        i.value = i.initValue
                    } else {
                        i.value = Array.isArray(i.value) ? [] : ''
                    }
                    if (i.clearOption) {
                        i.options = []
                    }
                })
            } else {
                for (const prop in filters.value[key]) {
                    if (
                        Object.prototype.hasOwnProperty.call(filters.value[key][prop], 'initValue')
                    ) {
                        filters.value[key][prop].value = filters.value[key][prop].initValue
                    } else {
                        filters.value[key][prop].value = Array.isArray(filters.value[key][prop].value)
                            ? []
                            : ''
                    }
                    if (filters.value[key][prop].clearOption) {
                        filters.value[key][prop].options = []
                    }
                }
            }
        }
    }
    emits('update:filterData', filters.value)
    emits('doSearch')
}

let timer = null
const handleInput = (item) => {
    item.value = item.value.trim()
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        emits('update:filterData', filters.value)
        if (!item.noEmit && !props.noEmit) {
            emits('doSearch')
        }
    }, 300)
}

const doSelectChange = (item) => {
    item.handleChange && item.handleChange(item)
    // 有的不需要立即执行接口
    if (!item.noEmit && !props.noEmit) {
        emits('doSearch')
    }
}

const handleCheckboxChange = (item) => {
    item.handleChange && item.handleChange(item)
    // 有的不需要立即执行接口
    if (!item.noEmit && !props.noEmit) {
        emits('doSearch')
    }
}

const handleSearch = () => {
    emits('doSearch')
}

watch(
    () => props.filterData,
    (newval) => {
        filters.value = cloneDeep(newval)
        if (newval.list) {
            for (const key in newval.list) {
                if (newval.list[key].isFull) {
                    noGridData.value[key] = newval.list[key]
                } else {
                    gridData.value[key] = newval.list[key]
                }
            }
        }
    },
    {
        immediate: true,
        deep: true,
    }
)
onMounted(() => {
    const height = mains.value.clientHeight
    console.log(height, 'heightheight')
    if (height <= 37) {
        showicon.value = false
        isunfold.value = true
    } else {
        showicon.value = true
        isunfold.value = false
    }
})
</script>

<style lang="scss" scoped>
.my-h-auto {
    height: auto;
}

.fix-h {
    height: 37px;
    overflow: hidden;
}

.spin180 {
    transform: rotate(-180deg);
}

.w-300 {
    width: 300px;
}

.w-16 {
    width: 16px;
}

.mytransition {
    transition: all .5s;
}

.label {
    white-space: nowrap;
}

.grid {
    width: 100%;
    display: grid;
    // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

.full {
    grid-row-start: none;
}

.set-lh {
    line-height: 36px;
}

:deep(.set-fs .el-range-input) {
    font-size: 12px !important;
}
</style>
